<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <script>
    let ul = document.querySelector('ul')

    function getCount (el) {
      let liList = el.querySelectorAll('li')
      console.log(liList.length)
      return liList.length
    }

    function setCount (el) {
      for (const ele of el.children) {
        if (ele.tagName === 'LI') {
          let count = getCount(ele)
          if (count) {
            ele.firstChild.textContent += `[${count}]`
          }
        }
        setCount(ele)
      }
    }

    setCount(ul)


  </script>
</body>
</html>